<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>班级信息管理</title>
</head>

<body>

  <!-- 查询功能区 -->
  <div>
    <input type="text" id="txtCidCname" placeholder="班级名称模糊查询">
    <button id="btnQuery">查询</button>
    <button id="btnReset">重置</button>
    <button id="btnShowAdd">添加</button>
  </div>
  
  <!-- 数据显示区 -->
  <table border="1" style="width: 100%;">

    <thead>
      <tr>
        <th>班级编号</th>
        <th>班级名称</th>
        <th>班级信息</th>
        <th>班级修改时间</th>
        <th>操作</th>
      </tr>
    </thead>

    <tbody id="tbDept">
      <!-- <tr>
        <td>111</td>
        <td>222</td>
        <td>333</td>
        <td>444</td>
      </tr> -->
</tbody>

  </table>

  <!-- 分页区 -->
  <div id="divPage">
    <span>上一页</span>
    <span></span>
    <span>下一页</span>
  </div>

  <!-- 添加的对话框 -->
  <dialog id="dialogAdd">
    <div>添加班级信息</div>
    <div>
      <input type="text" id="txtcinfo" placeholder="班级描述">
    </div>
    <div>
      <input type="text" id="txtcname" placeholder="班级名称">
    </div>
    <hr>
    <div style="display: flex;">
      <button id="btnAdd">添加</button>
      <form method="dialog">
        <button>关闭</button>
      </form>
    </div>

  </dialog>

  <!-- 修改对话框 -->
  <dialog id="dialogModify">
    <div>修改班级信息</div>
    <div>
      <input type="text" id="txtMcinfo" placeholder="班级描述">
    </div>
    <div>
      <input type="text" id="txtMcname" placeholder="班级名称">
    </div>
    <hr>
    <div style="display: flex;">
      <button id="btnSave">保存</button>
      <form method="dialog">
        <button>关闭</button>
      </form>
    </div>

  </dialog>

  <script src="./js/zuoye.js"></script>
  
</body>

</html>